<template>
  <header class="zui-header" :class="[{ 'zui-header--fixed': fixed }]" :style="{ height }">
    <slot></slot>
  </header>
</template>

<script>
export default {
  name: 'z-header',

  props: {
    height: {
      type: String,
      default: '48px'
    },
    fixed: Boolean
  }
}
</script>

<style lang="less">
@import "../z-theme/_variable.less";

.zui-header {
  position: relative;
  display: block;
  box-sizing: border-box;
  flex: none;
}

.zui-header--fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: @zindex-navbar-fixed;
  box-shadow: @--box-shadow-dark;
}
</style>
